<!doctype html>


<html>
<head>
  <link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon">
  <title>style.js (Closure Library API Documentation - JavaScript)</title>
  <link rel="stylesheet" href="static/css/base.css">
  <link rel="stylesheet" href="static/css/doc.css">
  <link rel="stylesheet" href="static/css/sidetree.css">
  <link rel="stylesheet" href="static/css/prettify.css">

  <script>
     var _staticFilePath = "static/";
     var _typeTreeName = "goog";
     var _fileTreeName = "Source";
  </script>

  <script src="static/js/doc.js">
  </script>


  <meta charset="utf8">
</head>

<body onload="grokdoc.onLoad();">

<div id="header">
  <div class="g-section g-tpl-50-50 g-split">
    <div class="g-unit g-first">
      <a id="logo" href="index.html">Closure Library API Documentation</a>
    </div>

    <div class="g-unit">
      <div class="g-c">
        <strong>Go to class or file:</strong>
        <input type="text" id="ac">
      </div>
    </div>
  </div>
</div>





<div class="colmask rightmenu">
<div class="colleft">
    <div class="col1">
      <!-- Column 1 start -->

<div id="title">
       <span class="fn">style.js</span>
</div>

<div class="g-section g-tpl-75-25">
  <div class="g-unit g-first" id="description">
    <span class='nodesc'>No description.</span>
  </div>
  

        <div class="g-unit" id="useful-links">
          <div class="title">Useful links</div>
          <ol>
            <li><a href="local_closure_goog_editor_style.js.source.html"><span class='source-code-link'>Source Code</span></a></li>
            <li><a href="http://code.google.com/p/closure-library/source/browse/local/closure/goog/editor/style.js">Git</a></li>
          </ol>
        </div>
</div>

<h2 class="g-first">File Location</h2>
  <div class="g-section g-tpl-20-80">
    <div class="g-unit g-first">
      <div class="g-c-cell code-label">/goog/editor/style.js</div>
    </div>
  </div>
<hr/>


   
<br/>

  <div class="legend">
        <span class="key publickey"></span><span>Public</span>
        <span class="key protectedkey"></span><span>Protected</span>
        <span class="key privatekey"></span><span>Private</span>
  </div>









<div class="section">
  <table class="horiz-rule">


  </table>
</div>




  <h2>Global Functions</h2>





<div class="section">
  <table class="horiz-rule">


     <tr class="even entry private">
       <td class="access"></td>






  <td>
    <a name="goog.editor.style.cancelMouseDownHelper_"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.editor.style.</span><span class="entryName">cancelMouseDownHelper_<span class="args">(<span class="arg">e</span>)</span>
        </span>
      </div>


     <div class="entryOverview">
       Prevent the default action on mousedown events.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">e</span>
        : <span class="type"><a href="class_goog_events_Event.html">goog.events.Event</a></span>
        <div class="entryOverview">The mouse down event.</div>
     </td>
   </tr>
  </table>
      </div>
   
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_editor_style.js.source.html#line128">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry private">
       <td class="access"></td>






  <td>
    <a name="goog.editor.style.getComputedOrCascadedStyle_"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.editor.style.</span><span class="entryName">getComputedOrCascadedStyle_<span class="args">(<span class="arg">node</span>,&nbsp;<span class="arg">stylePropertyName</span>)</span>
        </span>
        &#8658; <span>?</span><span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>
      </div>


     <div class="entryOverview">
       Gets the computed or cascaded style.

This is different than goog.style.getStyle_ because it returns null
for text nodes (instead of throwing an exception), and never reads
inline style. These two functions may need to be reconciled.


     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">node</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/DOM/Node">Node</a></span>
        <div class="entryOverview">Node to get style of.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">stylePropertyName</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>
        <div class="entryOverview">Property to get (must be camelCase,
    not css-style).</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<span>?</span><span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>&nbsp;
            Style value, or null if this is not an element node.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_editor_style.js.source.html#line56">code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry public">
       <td class="access"></td>






  <td>
    <a name="goog.editor.style.getContainer"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.editor.style.</span><span class="entryName">getContainer<span class="args">(<span class="arg">node</span>)</span>
        </span>
        &#8658; <span class="type"><a href="https://developer.mozilla.org/en/DOM/Element">Element</a></span>
      </div>


     <div class="entryOverview">
       Return the first ancestor of this node that is a container, inclusive.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">node</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/DOM/Node">Node</a></span>
        <div class="entryOverview">Node to find the container of.</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<span class="type"><a href="https://developer.mozilla.org/en/DOM/Element">Element</a></span>&nbsp;
            The element which contains node.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_editor_style.js.source.html#line106">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>






  <td>
    <a name="goog.editor.style.isContainer"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.editor.style.</span><span class="entryName">isContainer<span class="args">(<span class="arg">element</span>)</span>
        </span>
        &#8658; <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span>
      </div>


     <div class="entryOverview">
       Returns true if the element is a container of other non-inline HTML
Note that span, strong and em tags, being inline can only contain
other inline elements and are thus, not containers. Containers are elements
that should not be broken up when wrapping selections with a node of an
inline block styling.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">element</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/DOM/Node">Node</a></span>
        <div class="entryOverview">The element to check.</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span>&nbsp;
            Whether the element is a container.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_editor_style.js.source.html#line90">code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry public">
       <td class="access"></td>






  <td>
    <a name="goog.editor.style.isDisplayBlock"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.editor.style.</span><span class="entryName">isDisplayBlock<span class="args">(<span class="arg">node</span>)</span>
        </span>
        &#8658; <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span>
      </div>


     <div class="entryOverview">
       Checks whether the given element inherits display: block.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">node</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/DOM/Node">Node</a></span>
        <div class="entryOverview">The Node to check.</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span>&nbsp;
            Whether the element inherits CSS display: block.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_editor_style.js.source.html#line75">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>






  <td>
    <a name="goog.editor.style.makeSelectable"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.editor.style.</span><span class="entryName">makeSelectable<span class="args">(<span class="arg">element</span>)</span>
        </span>
      </div>


     <div class="entryOverview">
       Make the given element selectable.

For IE this simply turns off the "unselectable" property.

Under FF no descendent of an unselectable node can be selectable:

<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=203291">https://bugzilla.mozilla.org/show_bug.cgi?id=203291</a>

So we make each ancestor of node selectable, while trying to preserve the
unselectability of other nodes along that path

This may cause certain text nodes which should be unselectable, to become
selectable. For example:

<div id='div1' style='-moz-user-select: none'>
  Text1
  <span id='span1'>Text2</span></div>

If we call makeSelectable on span1, then it will cause "Text1" to become
selectable, since it had to make div1 selectable in order for span1 to be
selectable.

If "Text1" were enclosed within a <p> or <span>, then this problem would
not arise.  Text nodes do not have styles, so its style can't be set to
unselectable.

</span></p>
     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">element</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/DOM/Element">Element</a></span>
        <div class="entryOverview">The element to make selectable.</div>
     </td>
   </tr>
  </table>
      </div>
   
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_editor_style.js.source.html#line199">code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry public">
       <td class="access"></td>






  <td>
    <a name="goog.editor.style.makeUnselectable"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.editor.style.</span><span class="entryName">makeUnselectable<span class="args">(<span class="arg">element</span>,&nbsp;<span class="arg">eventHandler</span>)</span>
        </span>
      </div>


     <div class="entryOverview">
       Makes the given element unselectable, as well as all of its children, except
for text areas, text, file and url inputs.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">element</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/DOM/Element">Element</a></span>
        <div class="entryOverview">The element to make unselectable.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">eventHandler</span>
        : <span class="type"><a href="class_goog_events_EventHandler.html">goog.events.EventHandler</a></span>
        <div class="entryOverview">An EventHandler to register
    the event with. Assumes when the node is destroyed, the eventHandler's
    listeners are destroyed as well.</div>
     </td>
   </tr>
  </table>
      </div>
   
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_editor_style.js.source.html#line145">code &raquo;</a>
  </td>
     </tr>


  </table>
</div>






      <!-- Column 1 end -->
    </div>

        <div class="col2">
          <!-- Column 2 start -->
          <div class="col2-c">
            <h2 id="ref-head">Directory editor</h2>
            <div id="localView"></div>
          </div>

          <div class="col2-c">
            <h2 id="ref-head">File Reference</h2>
            <div id="sideFileIndex" rootPath="" current="/goog/editor/style.js"></div>
          </div>
          <!-- Column 2 end -->
        </div>
</div>
</div>

</body>
</html>
